จะใช้ Magento 1.9.1.0 Swatches ที่กำหนดค่าได้ในชุดรูปแบบเริ่มต้น (หรือชุดรูปแบบที่กำหนดเอง) ได้อย่างไร


28

UPDATE:คำตอบของฉันรองรับการเปลี่ยนแปลงอิมเมจฐานผลิตภัณฑ์โดยอัตโนมัติหลังจากสวอตช์ นอกจากนี้คุณยังสามารถหากวดวิชารายละเอียดเพิ่มเติมเกี่ยวกับวิธีการทำเช่นนี้รวมถึงภาพเพิ่มเติม ที่นี่

Magento CE 1.9.1.0 มาพร้อมกับคุณสมบัติใหม่ที่ดีมาก: Swatches ที่กำหนดค่าได้ น่าเสียดายที่มีให้เฉพาะกับแพ็คเกจ RWD ที่มาพร้อมกับการติดตั้ง Magento ที่เป็นค่าเริ่มต้น นี่เป็นคำถามที่ตอบตัวเองเกี่ยวกับวิธีทำให้ Magento สามารถกำหนดค่า Swatches ได้สำหรับแพ็คเกจเริ่มต้น สำหรับทุกคนที่ต้องการรวม Swatches ที่กำหนดค่าได้เข้ากับธีมที่กำหนดเองข้อมูลนี้อาจมีประโยชน์เช่นกัน

หมายเหตุ 1:สิ่งนี้มีไว้เพื่อเป็นแนวทางเบื้องต้นเกี่ยวกับวิธีทำให้ Swatches ที่ตั้งค่าได้สำหรับแพ็คเกจเริ่มต้นของ Magento สิ่งนี้สามารถ (แต่อาจไม่) ใช้ได้กับทุกธีมที่กำหนดเอง สำรองไฟล์ดั้งเดิม (และฐานข้อมูล) ของคุณเสมอก่อนทำการเปลี่ยนแปลงใด ๆ

หมายเหตุ 2: swatches ใช้งานได้ (ภาพหน้าจอด้านล่าง) แต่ฉันยังไม่ได้รับภาพผลิตภัณฑ์ที่จะเปลี่ยนโดยอัตโนมัติพร้อมกับ swatches ฉันจะลองดูเมื่อฉันพบเวลา

ป้อนคำอธิบายรูปภาพที่นี่

รู้สึกอิสระที่จะมีส่วนร่วมโดยการแสดงความคิดเห็นและให้คำแนะนำ!


ลิงค์ที่คุณเพิ่มเข้าไปในคำถามไม่ทำงาน: bemaged.com/en/blog/use-magento-swatches-in-custom-theme
Mukesh Chapagain

คำตอบ:


27
  1. คัดลอกโฟลเดอร์

    app/design/frontend/RWD/default/template/configurableswatches/

    และเนื้อหาของ

    app/design/frontend/DEFAULT/default/template/

    (หรือโฟลเดอร์แม่แบบแพ็คเกจของคุณ)

  2. คัดลอกไฟล์

    app/design/frontend/RWD/default/template/catalog/product/view/type/options/configurable.phtml

    ไปยัง

    app/design/frontend/DEFAULT/default/template/catalog/product/view/type/options/

    (หรือโฟลเดอร์แม่แบบแพ็คเกจของคุณ)

  3. คัดลอกไฟล์

    app/design/frontend/RWD/default/template/catalog/product/view/media.phtml

    ไปยัง

    app/design/frontend/DEFAULT/default/template/catalog/product/view/

    (หรือโฟลเดอร์แม่แบบแพ็คเกจของคุณ)

  4. คัดลอกโฟลเดอร์

    skin/frontend/RWD/default/js/configurableswatches/
    skin/frontend/RWD/default/js/lib/
    

    และเนื้อหาของพวกเขาเพื่อ

    skin/frontend/DEFAULT/default/js/

    (หรือโฟลเดอร์แพคเกจสกินของคุณ)

  5. คัดลอกไฟล์

    skin/frontend/RWD/default/js/app.js
    skin/frontend/RWD/default/js/minicart.js
    skin/frontend/RWD/default/js/slideshow.js
    

    ไปยัง

    skin/frontend/DEFAULT/default/js/

    (หรือโฟลเดอร์แพคเกจสกินของคุณ)

  6. คัดลอกไฟล์

    app/design/frontend/RWD/default/layout/configurableswatches.xml

    ไปยัง

    app/design/frontend/DEFAULT/default/layout/

    (หรือโฟลเดอร์เค้าโครงแพ็คเกจของคุณ)

  7. สร้างไฟล์

    app/design/frontend/DEFAULT/default/layout/local.xml

หากโฟลเดอร์เค้าโครงแพคเกจของคุณมีlocal.xmlไฟล์อยู่แล้วอย่าเขียนทับมัน ดูการเปลี่ยนแปลงในขั้นตอนถัดไปและคัดลอกไปยังlocal.xmlไฟล์เวอร์ชันของคุณ

  1. เปิดlocal.xmlและเพิ่มรหัสต่อไปนี้:

    <?xml version="1.0"?>
    <layout>
    
        <default>
    
            <reference name="head">
    
                    <action method="addJs"><script>lib/jquery/jquery-1.10.2.min.js</script></action>
                    <action method="addJs"><script>lib/jquery/noconflict.js</script></action>
    
                    <action method="addItem"><type>skin_js</type><name>js/lib/modernizr.custom.min.js</name></action>
                    <action method="addItem"><type>skin_js</type><name>js/lib/selectivizr.js</name></action>
                    <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.js</name></action>
                    <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.addListener.js</name></action>
                    <action method="addItem"><type>skin_js</type><name>js/lib/enquire.js</name></action>
                    <action method="addItem"><type>skin_js</type><name>js/app.js</name></action>
                    <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.min.js</name></action>
                    <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.swipe.min.js</name></action>
                    <action method="addItem"><type>skin_js</type><name>js/slideshow.js</name></action>
                    <action method="addItem"><type>skin_js</type><name>js/lib/imagesloaded.js</name></action>
            <action method="addItem"><type>skin_js</type><name>js/minicart.js</name></action>
    
            </reference>
    
        </default>
    
        <catalog_product_view>
    
            <reference name="head">
    
                <action method="addItem"><type>skin_js</type><script>js/lib/elevatezoom/jquery.elevateZoom-3.0.8.min.js</script></action>
    
            </reference>
    
            <reference name="product.info.media">
    
                <block type="core/text_list" name="product.info.media.after" as="after" />
    
            </reference>
    
        </catalog_product_view>
    
        <PRODUCT_TYPE_configurable>
    
            <reference name="product.info.options.configurable">
    
                <block type="core/text_list" name="product.info.options.configurable.renderers" as="attr_renderers">
                            <block type="configurableswatches/catalog_product_view_type_configurable_swatches" template="configurableswatches/catalog/product/view/type/options/configurable/swatches.phtml" />
                </block>
                <block type="core/text_list" name="product.info.options.configurable.after" as="after">
                <block type="core/template" template="configurableswatches/catalog/product/view/type/configurable/swatch-js.phtml" />
                </block>
    
            </reference>
    
        </PRODUCT_TYPE_configurable>
    
    </layout>
    
  2. เพิ่ม css ต่อไปนี้ไปยังไฟล์styles.cssของคุณ:

    /* ============================================ *
     * Configurable Swatches
     * ============================================ */
    /* Clears */
    .clearfix:after,
    .configurable-swatch-list:after,
    .product-view .product-options .swatch-attr:after {
      content: '';
      display: table;
      clear: both;
    }
    
    /* General Swatch Styling */
    .swatch-link,
    .swatch-label {
      display: block;
      border-radius: 3px;
      font-size: 14px;
      text-align: center;
      color: #636363;
      text-decoration: none;
      box-sizing: content-box;
    }
    
    .swatch-link {
      border: 1px solid #cccccc;
      margin: 0 0 3px;
    }
    .swatch-link img {
      border-radius: 2px;
    }
    .swatch-link:hover {
      cursor: pointer;
      text-decoration: none;
    }
    .swatch-link .x {
      display: none;
      text-indent: -999em;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: url(../images/bg_x.png) center no-repeat transparent;
      z-index: 10;
    }
    .swatch-link.has-image .swatch-label {
      position: relative;
    }
    .swatch-link.has-image img {
      position: absolute;
      top: 0;
      left: 0;
    }
    
    .swatch-label {
      border: 1px solid #fff;
      margin: 0;
      white-space: nowrap;
      background: #f4f4f4;
    }
    
    .configurable-swatch-list {
      margin-left: -3px;
      zoom: 1;
      clear: both;
      -webkit-transform: translateZ(0px);
    }
    .configurable-swatch-list li {
      float: left;
      zoom: 1;
      margin: 0 0 0 3px;
    }
    .products-grid .configurable-swatch-list li {
      display: inline-block;
      float: none;
      margin: 0;
      vertical-align: top;
    }
    .configurable-swatch-list .not-available .x {
      display: block;
    }
    .configurable-swatch-list .not-available .swatch-link {
      border-color: #ededed;
      position: relative;
    }
    .configurable-swatch-list .not-available .swatch-link.has-image img {
      opacity: 0.4;
      filter: alpha(opacity=40);
    }
    .configurable-swatch-list .not-available .swatch-label {
      color: #aaa;
      background: #fff;
    }
    .configurable-swatch-list .wide-swatch .swatch-label {
      padding: 0 6px;
    }
    .configurable-swatch-list .not-available a:focus {
      outline: 0;
    }
    
    #narrow-by-list dd .configurable-swatch-list li {
      margin: 0 0 0 3px;
      width: 47%;
    }
    #narrow-by-list dd .swatch-link {
      border: none;
      line-height: 25px;
      margin-right: 2px;
      text-align: left;
    }
    #narrow-by-list dd .swatch-link.has-image {
      line-height: inherit;
    }
    #narrow-by-list dd .swatch-link:hover .swatch-label {
      border-color: #3399cc;
    }
    #narrow-by-list dd .swatch-label {
      background: #f4f4f4;
      border: 1px solid #cccccc;
      border-radius: 3px;
      display: block;
      float: left;
      line-height: 1.5em;
      margin: 0 5px 0 0;
      padding: 1px 5px;
      white-space: nowrap;
    }
    #narrow-by-list dd .swatch-label img {
      border: 1px solid #fff;
      border-radius: 3px;
      box-sizing: content-box;
    }
    #narrow-by-list dd .has-image .swatch-label {
      padding: 0;
    }
    
    @media only screen and (max-width: 770px) {
      #narrow-by-list dd .configurable-swatch-list li:nth-child(odd) {
        clear: left;
      }
    }
    .currently .swatch-current {
      position: relative;
    }
    .currently .swatch-current .btn-remove {
      margin-top: -10px;
      position: absolute;
      right: 0;
      top: 50%;
    }
    .currently .swatch-current span {
      display: block;
      float: left;
    }
    .currently .swatch-link {
      display: inline-block;
      margin: 0 0 0 3px;
    }
    .currently .swatch-link:hover {
      border-color: #cccccc;
      cursor: default;
    }
    
    /* Other Swatch States */
    .configurable-swatch-list .hover .swatch-link,
    .configurable-swatch-list .selected .swatch-link,
    .swatch-link:hover {
      border-color: #3399cc;
    }
    
    .configurable-swatch-box {
      background: none !important;
    }
    .configurable-swatch-box select.swatch-select {
      display: none;
    }
    .configurable-swatch-box .validation-advice {
      margin: 0 0 5px;
      background: #df280a;
      padding: 2px 5px !important;
      font-weight: bold;
      color: #fff !important;
      float: left;
      display: block;
      border-radius: 3px;
    }
    .product-view .product-img-box .product-image img {
        max-width: 100%;
        max-height: 750px;
        margin: 0px auto;
    }
    .product-view .product-img-box .product-image-zoom {
        z-index: 0;
    }
    .product-view .product-image-thumbs img {
        max-width: 100%;
        max-height: 100%;
    }
    
  3. คัดลอกไฟล์

    skin/frontend/RWD/default/images/bg_x.png

    ไปยัง

    skin/frontend/DEFAULT/default/images/

1
คุณจะเพิ่มเสื้อโค้ตในแต่ละผลิตภัณฑ์ในแคตตาล็อก / ผลิตภัณฑ์ / รายการอย่างไร ภายใน RWD เริ่มต้นคุณสามารถเลือก swatches ที่แตกต่างได้โดยตรงจากที่นี่โดยไม่ต้องคลิกเข้าไปในผลิตภัณฑ์ แน่นอนว่าคุณต้องเปิดใช้งานการตั้งค่าในแบ็กเอนด์: "แอททริบิวของผลิตภัณฑ์เพื่อใช้สำหรับการจับคู่ในรายการผลิตภัณฑ์" ก่อน
Joe

นอกจากนี้ฉันขอแนะนำให้เพิ่ม.product-image-zoom.zoom-available .gallery-image { display: none; } .product-image-zoom.zoom-available .gallery-image.visible { display: block; }ในส่วนท้ายของ CSS โดยที่ไม่มีคุณจะเห็นภาพผลิตภัณฑ์ที่เพิ่มล่าสุดเมื่อเข้าสู่ผลิตภัณฑ์ แต่เมื่อวางเมาส์คุณจะเห็นภาพหลัก
SebiF

1
รูปภาพจากแกลเลอรี่ไม่เปลี่ยนแปลงเมื่อคลิกแถบสีคุณช่วยบอกฉันทีว่ามันทำงานได้อย่างไร
Tahir Yasin

2

โซลูชันของคุณยอดเยี่ยม แต่ไม่แสดงแถบสีในรายการหมวดหมู่หรือตาราง ที่นี่ฉันเพิ่มวิธีแก้ปัญหาเพื่อแสดงทดสอบบน magento 1.9.2.4

ใน: แอพ / ออกแบบ / ส่วนหน้า / กำหนดเอง / เทมเพลต / แคตตาล็อก / ผลิตภัณฑ์เพิ่มตามบรรทัดในlist.phtml

1 - ก่อนที่จะแสดงในมุมมองรายการตรวจสอบว่ามีสิ่งนี้ถ้าไม่มีอัพเดต o การเปลี่ยนแปลง (บรรทัดที่ 39):

<?php $_imgSize = 300; ?>
            <img id="product-collection-image-<?php echo $_product->getId(); ?>"
                 src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize($_imgSize); ?>"
                 alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
        </a>

ในทางเลือกสามารถใช้สิ่งนี้:

            <img id="product-collection-image-<?php echo $_product->getId(); ?>"
          src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(230,279); ?>" class="small-image" 
          alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />             

        </a>

ปรับขนาดภาพ

2 - หลังจาก "getRatingSummary" = php สิ้นสุด if = ประมาณบรรทัดที่ 53 ให้เพิ่ม:

                        <?php
                    // Provides extra blocks on which to hang some features for products in the list
                    // Features providing UI elements targeting this block will display directly below the product name
                    if ($this->getChild('name.after')) {
                        $_nameAfterChildren = $this->getChild('name.after')->getSortedChildren();
                        foreach ($_nameAfterChildren as $_nameAfterChildName) {
                            $_nameAfterChild = $this->getChild('name.after')->getChild($_nameAfterChildName);
                            $_nameAfterChild->setProduct($_product);
                            echo $_nameAfterChild->toHtml();
                        }
                    }
                    ?>

3 - ทำการเปลี่ยนแปลงเดียวกันกับมุมมอง gird รอบ ๆ บรรทัดที่ 120 และ 152

4 - ในตอนท้ายของไฟล์เพิ่มสิ่งนี้:

 <?php
// Provides a block where additional page components may be attached, primarily good for in-page JavaScript
if ($this->getChild('after')) {
    $_afterChildren = $this->getChild('after')->getSortedChildren();
    foreach ($_afterChildren as $_afterChildName) {
        $_afterChild = $this->getChild('after')->getChild($_afterChildName);
        //set product collection on after blocks
        $_afterChild->setProductCollection($_productCollection);
        echo $_afterChild->toHtml();
    }
}
?>

1

มันมีประโยชน์มาก! ฉันมีรายละเอียดเพิ่มเติมบางอย่างที่ฉันสามารถทำงานผ่านเพื่อให้การสลับภาพไปใช้งานได้

  1. คัดลอกไฟล์

    app/design/frontend/RWD/default/template/catalog/product/view/media.phtml

    ไปยัง

    app/design/frontend/DEFAULT/default/template/catalog/product/view/

    หรือธีมที่กำหนดเองของคุณ

  2. คัดลอกรายการไฟล์ต่อไปนี้:

    app/skin/frontend/RWD/default/js/app.js
    app/skin/frontend/RWD/default/js/slideshow.js
    app/skin/frontend/RWD/default/js/lib/* (all files and the elevatezoom folder)
    

    ไปยัง

    app/skin/frontend/DEFAULT/default/js

    หรือธีมที่กำหนดเองของคุณ

  3. หากต้องการรวมสคริปต์ใหม่เหล่านี้ให้แก้ไข app / design / frontend / DEFAULT / default / layout / page.xml (ทำการสำรองข้อมูลไฟล์นี้ก่อนและตรวจสอบให้แน่ใจว่าได้ผสานการเปลี่ยนแปลงหากคุณอัปเดตเนื่องจากธีมเริ่มต้นจะถูกเขียนทับ)

    เพิ่มหลังจากบรรทัด 38:

    <action method="addJs"><script>lib/jquery/jquery-1.10.2.min.js</script></action>
    <action method="addJs"><script>lib/jquery/noconflict.js</script></action>
    

    เพิ่มหลังจากบรรทัด 50 (บรรทัด 52 หากคุณเพิ่มสองบรรทัดด้านบนแล้ว):

        <action method="addItem"><type>skin_js</type><name>js/lib/modernizr.custom.min.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/lib/selectivizr.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/lib/matchMedia.addListener.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/lib/enquire.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/app.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.min.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/lib/jquery.cycle2.swipe.min.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/slideshow.js</name></action>
        <action method="addItem"><type>skin_js</type><name>js/lib/imagesloaded.js</name></action>
    
  4. ลบส่วน / * ผลิตภัณฑ์ภาพ * / ออกจากไฟล์styles.cssของคุณ(ประมาณบรรทัด 783-803) และวางใน CSS ต่อไปนี้จากไฟล์ RWD styles.css:

    * Product Images */
    .product-img-box {
      width: 50%;
      float: left;
    }
    .product-img-box .product-name h1 {
      border: 0;
    }
    .product-img-box .product-image {
      margin-bottom: 10px;
    }
    .product-img-box .product-image img {
      max-width: 100%;
      max-height: 750px;
      margin: 0px auto;
    }
    
    @media only screen and (max-width: 479px) {
      .product-img-box .product-image img {
        max-height: 450px;
      }
    }
    .product-image-gallery {
      position: relative;
    }
    .product-image-gallery .gallery-image {
      display: none;
    }
    .product-image-gallery .gallery-image.visible {
      display: block;
    }
    .product-image-gallery .gallery-image.visible.hidden {
      visibility: hidden;
    }
    .product-image-gallery:before, .product-image-gallery:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      display: none;
    }
    .product-image-gallery:before {
      background-color: white;
      opacity: 0.8;
      z-index: 2;
    }
    .product-image-gallery:after {
      background-image: url("../images/opc-ajax-loader.gif");
      background-repeat: no-repeat;
      background-position: center;
      z-index: 3;
    }
    .product-image-gallery.loading {
      position: relative;
    }
    .product-image-gallery.loading:before, .product-image-gallery.loading:after {
      display: block;
    }
    
    .product-image-thumbs li {
      display: inline-block;
    }
    .product-image-thumbs li:first-child {
      margin-left: -1px;
    }
    .product-image-thumbs a {
      display: inline-block;
      border: 1px solid transparent;
    }
    
    .no-touch .product-image-thumbs a:hover {
      border-color: #c7c7c7;
    }
    

สุดท้าย แต่ไม่ท้ายสุดการเพิ่มประสิทธิภาพของ elevateZoom ด้วย Google และการค้นหาโพสต์ต่อไปนี้ที่บล็อก BelVG โดย Mishel Soikoฉันสามารถปรับเปลี่ยนและใช้ประโยชน์จากการตั้งค่าเพิ่มเติมสำหรับ elevateZoom เช่นการซูมภายในหรือออฟเซ็ตของหน้าต่างซูม และอื่น ๆ ฉันต้องการให้รูปภาพมีป๊อปอัปแฟนซีบ็อกซ์เมื่อคลิกซึ่งฉันเปิดใช้งานด้วยความช่วยเหลือจากบล็อกด้านบนในความคิดเห็น

  1. เปิดไฟล์app.js ที่คุณคัดลอกไปยังธีมของคุณก่อนหน้านี้

    เหนือบรรทัด 1153 ( var ProductMediaManager = {) วาง (คัดลอกจากลิงก์บล็อก BelVG ด้านบน):

    var settings = {
    
        // set tint background
        tint:true,
        tintColour:'#F90',
        tintOpacity:0.5,
    
        // Size
        zoomWindowHeight: 300,
        zoomWindowWidth: 400,
        borderSize: 0,
    
        // Position
        zoomWindowOffetx: 10,
        zoomWindowOffety: 0,
    
        // Additional settings for Zoomer positioning.
        // zoomWindowPosition: 1,
        // zoomType: "inner",
    
        // Fade-in speed settings
        zoomWindowFadeIn: 500,
        zoomWindowFadeOut: 500,
        lensFadeIn: 500,
        lensFadeOut: 500,
    
        // Ability to zoom by using the mouse scroll.
        scrollZoom : true,
    
        // inertia - my favorite one 
        easing: true
    }
    

    หากคุณต้องการป๊อปอัปแฟนซีบ็อกซ์เหนือสิ่งที่ตอนนี้บรรทัด 1227 วางใน:

    $j(".product-image-gallery").on("click", function(e) {
        var src = $j('.product-image img.visible').attr('src');
    $j.fancybox(src);
    });
    

    หมายเหตุคุณจะต้องโหลดไลบรารี Fancybox js หลังจาก jQuery ใน page.xml หรือที่อื่น ๆ ในธีมของคุณ

    สุดท้ายให้แก้ไขตอนนี้คืออะไรบรรทัดที่ 1232 (ถ้าคุณทำทั้งสองอย่างจากด้านบน) จาก:

    image.elevateZoom();

    ไปที่:

    image.elevateZoom(settings);

สำหรับภาพรวมของการตั้งค่าตัวซูมทั้งหมดให้ตรวจสอบหน้าทางการที่อธิบายการตั้งค่า elevateZoom

และควรทำให้มันใช้งานได้ หากคุณกำลังทำงานกับธีมที่กำหนดเอง (เหมือนเดิม) คุณอาจต้องทำมากกว่านี้


ด้วยวิธีการที่แตกต่างกันเล็กน้อยฉันก็สามารถทำให้การสลับรูปภาพอัตโนมัติทำงานได้เช่นกัน ในแนวทางของฉันฉันใช้local.xmlเพื่อโหลด.jsไฟล์ทั้งหมดในheadหน้า ฉันจะอัพเดตคำตอบเมื่อพบเวลา จนแล้วคุณสามารถหารายละเอียดการกวดวิชาที่ผมเขียนเกี่ยวกับวิธีการทำเช่นนี้ที่นี่
ForMat

0 โหวตโหวต Swatches ที่ปรับแต่งได้จะไม่เปลี่ยนรูปภาพเกี่ยวกับผลิตภัณฑ์ที่สามารถกำหนดค่าได้โปรดตรวจสอบสิ่งนี้, ravichomal.blogspot.in/2015/12/30
Ravi Chomal
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.