简体   繁体   English

Prestashop产品定制 - 保存到购物车

[英]Prestashop Product Customizations - Saving To Cart

Prestashop 1.6 Prestashop 1.6

I created a module that adds a form to the product page. 我创建了一个模板,将一个表单添加到产品页面。 I used the prestashop module generator to create a basic bare-bones module. 我使用prestashop模块生成器来创建一个基本的裸机模块。 It doesn't do anything except add a form to the product page via a hook. 除了通过钩子向产品页面添加表单外,它不会执行任何操作。

I am using the default-bootstrap theme. 我正在使用default-bootstrap主题。

The form is generated via a .tpl file that is based on which category the product is in (ie if it's in category A, then it shows form A). 表单是通过.tpl文件生成的,该文件基于产品所在的类别(即,如果它在类别A中,则表示形式A)。 The form looks like this: 表单如下所示:

<form id="engraving_selection">
    <h3>Engraving Options</h3>
    <input type="radio" name="engraving" value="Engrave-Different" id="engrave_different" checked="checked">Unique engraving for each item<br />
    <input type="radio" name="engraving" value="Engrave-Same" id="engrave_same">The engraving would the same on each item<br />
    <input type="radio" name="engraving" value="No-Engraving" id="no_engraving">I would not like engraving<br />
</form>
<form id="engraving_options">
    <h4>Engraving Text</h4>
    <div id="items">
        <div class="item" data-position="1">
            <h4 id="engraving-item">Item 1</h4>
            <label>Engraving Line 1: </label>
            <input type="text" class="engraving-input" name="line1-trophy" id="item1">
            <br />
            <label>Engraving Line 2: </label>
            <input type="text" class="engraving-input" name="line2-trophy" id="item1">
            <br />
            <label>Engraving Line 3: </label>
            <input type="text" class="engraving-input" name="line3-trophy" id="item1">
            <br />
        </div>
    </div>
</form>

The form is a selection of radio inputs, followed by 3 text inputs. 表格是一系列无线电输入,后面是3个文本输入。 If the user changes the quantity, an additional 3 inputs are added accordingly via javascript (so if the user changes the quantity to '2', then 2 sets of the 3 inputs appear for customization on each product). 如果用户更改数量,则通过javascript相应地添加额外的3个输入(因此,如果用户将数量更改为“2”,则会显示2组3个输入以便在每个产品上进行自定义)。

I would like some guidance on saving these inputs and the information the user has entered when the user clicks 'add to cart' so that it may be retrieved / edited later (before the user checks out). 我希望在用户点击“添加到购物车”时保存这些输入和用户输入的信息,以便稍后检索/编辑(在用户结帐之前)。

Some research has led me to ajax-cart.js and this function specifically: 一些研究让我得到了ajax-cart.js和这个功能:

add : function(idProduct, idCombination, addedFromProductPage, callerElement, quantity, whishlist)

What is the best way to do pass in that data so it can be saved/retrieved? 传递数据的最佳方法是什么,以便保存/检索?

Ultimately I would like it to be included on the order (obviously) and saved to the database with that order for future use. 最终,我希望它被包含在订单中(显然)并保存到数据库中以便将来使用。

I know the plugin Attribute Wizard Pro exists - but I'm looking to expand my knowledge and make something on my own. 我知道插件属性向导专业版存在 - 但我希望扩展我的知识并自己做点什么。

If there are other ways to go about this that would be cleaner/easier I'm open to those suggestions as well. 如果还有其他方法可以更清洁/更容易,我也会接受这些建议。

You can create a totally fresh solution, but it will take long time and many lines of code. 您可以创建一个全新的解决方案,但这需要很长时间和许多代码行。

The best choice would be to use Prestashop built-in product Customization option. 最好的选择是使用Prestashop内置产品定制选项。

  1. Go to Backoffice and select a single Product Edit > Customization tab. 转到Backoffice并选择单个“ Product Edit >“ Customization选项卡。
  2. Add Text fields number which you can think can be a maximum for one product. 添加Text fields编号,您可以认为这是一个产品的最大值。

“产品定制”选项卡

  1. Add some javascript to your product page hiding / showing these text fields inputs (as they all would be visible on default). 添加一些javascript到您的产品页面隐藏/显示这些文本字段输入(因为它们都默认可见)。

    You can add your javascript code to: 您可以将您的javascript代码添加到:

    • themes/[your-theme]/product.js file ( preferred ) - it will be loaded only on the product page, themes/[your-theme]/product.js文件( 首选 ) - 它只会加载到产品页面上,
    • themes/[your-theme]/js/autoload/[any-file-name].js - it will be loaded on all pages. themes/[your-theme]/js/autoload/[any-file-name].js - 它将被加载到所有页面上。

    Please be sure to add buggy free code :) 请务必添加免费代码:)

Done! 完成!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM