I have a one page website that has 1 product with color variations of the product i.e. Black, Pink, etc. I created a Products template that is cloneable, since each product option needs it's own unique SKU. How can I access the different "variables" for each product created to repeat in a select dropdown? Or is there a better way to structure adding products to the CMS?

Current Code (Hard Coded):

Code: Select all

<cms:pages masterpage='products.php'>
                              <form action="https://XXX.foxycart.com/cart" method="post" accept-charset="utf-8">
                                 <input type="hidden" name="name" value="Cool Example" />
                                 <input type="hidden" name="price" value="10" />
                                 <input type="hidden" name="code" value="sku123" />
                                 Only <sup>$</sup><span class="dark">79.99</span>
                                 <div class="gap-20"></div>
                                 <select>
                                    <option value="">Onyx</option>
                                    <option value="">Bubble Gum Pink</option>
                                    <option value="">Luscious Leopard</option>

                                 </select>
                                 <a class="order-button" href="#"><cms:show button_text /></a>
                              </form>
                           </cms:pages>

The Clonable template:

Code: Select all

<?php require_once( 'cms/cms.php' ); ?>
<cms:template title='Products' clonable='1' order='7'>
      <cms:editable name='product_name' label='Product Name' required='1' type='text' order='1'/>
      <cms:editable name='product_price' label='Price' desc='Use format 79.99' required='1' type='text' order='2'/>
      <cms:editable name='product_sku' label='SKU' desc='Must be unique for each product' required='1' type='text' order='3'/>
      <cms:editable name='product_weight' label='Weight' desc='in pounds' required='1' type='text' order='4'/>
      <cms:editable name='product_fc_category' label='FoxyCart Category' opt_values='ResQ Bag=ResQ_Bag || Mini ResQ Bag=Mini_ResQ_Bag' type='dropdown' order='5'/>
      <cms:editable name='product_image' label='Product Image' desc='Image will be automatically resized if bigger than 496x365px' quality='100' width='482' height='384' crop='1' show_preview='1' type='image' order='6'/>
      <cms:editable name='product_image_thumb' label='Product Image Thumbnail' desc='Thumbnail of product image' crop='1' width='160' height='159' show_preview='1' assoc_field='product_image' type='thumbnail' order='7' />
</cms:template>
<?php COUCH::invoke(); ?>

I need the option value to update with the related variables in the CMS for the shopping cart, as well as the price.

[KK]

Not sure if I understood the problem completely.
Are these the 'product variations' that you've created as individual cloned pages?

Code: Select all

<select>
    <option value="">Onyx</option>
    <option value="">Bubble Gum Pink</option>
    <option value="">Luscious Leopard</option>
</select>

- where selecting one of the options would change all the other parameters of the form.

I have created those as cloned templates, but those I just hard coded so I could see what the select looks like on the page. I am trying to figure out how to grab the data from those cloned pages and repeat them in option select so that when the admin adds a product in the products template it will add the necessary information to the option value (for the shopping cart) and the name of the product.

[KK]

So suppose you've created three cloned pages named 'Onyx', 'Bubble Gum Pink' and 'Luscious Leopard', do you want the single form you have to change to these as the user selects one of the three products -

Code: Select all

<form action="https://XXX.foxycart.com/cart" method="post" accept-charset="utf-8">
    <input type="hidden" name="name" value="Onyx" />
    <input type="hidden" name="price" value="10" />
    <input type="hidden" name="code" value="sku123" />
    Only <sup>$</sup><span class="dark">10.99</span>
    <div class="gap-20"></div>
    <select>
        <option value="" selected >Onyx</option>
        <option value="">Bubble Gum Pink</option>
        <option value="">Luscious Leopard</option>
    </select>
    <a class="order-button" href="#"><cms:show button_text /></a>
</form>

Code: Select all

<form action="https://XXX.foxycart.com/cart" method="post" accept-charset="utf-8">
    <input type="hidden" name="name" value="Bubble Gum Pink" />
    <input type="hidden" name="price" value="20" />
    <input type="hidden" name="code" value="sku456" />
    Only <sup>$</sup><span class="dark">20.99</span>
    <div class="gap-20"></div>
    <select>
        <option value="">Onyx</option>
        <option value="" selected >Bubble Gum Pink</option>
        <option value="">Luscious Leopard</option>
    </select>
    <a class="order-button" href="#"><cms:show button_text /></a>
</form>

Code: Select all

<form action="https://XXX.foxycart.com/cart" method="post" accept-charset="utf-8">
    <input type="hidden" name="name" value="Luscious Leopard" />
    <input type="hidden" name="price" value="30" />
    <input type="hidden" name="code" value="sku789" />
    Only <sup>$</sup><span class="dark">30.99</span>
    <div class="gap-20"></div>
    <select>
        <option value="">Onyx</option>
        <option value="">Bubble Gum Pink</option>
        <option value="" selected >Luscious Leopard</option>
    </select>
    <a class="order-button" href="#"><cms:show button_text /></a>
</form>

Is that correct?

That is correct and the values in the hidden inputs are just placeholders.

[KK]

You'll have to use JS to pull this off.
One way of doing it would be through AJAX as follows -

The form on the index page will be generated through the 'page-view' of the products template (this way all the hidden fields will have the right values for the product).

The page-view will also generate the options using cms:pages to list all products (including the current product which sets the 'selected' attribute).

Choosing an option will invoke repeat the step above invoking the page-view of the selected option.

Hope this helps.

Should I set up the couch side of things for the products differently so that I don't have to use JS or Ajax? I want to keep it all within couch if possible.

[KK]

Problem with this use-case is that in the back-end you have three distinct products but on the front-end you are making it seem like there is a single product with three (or more) variations.

If this is how you want things to be then, I am afraid, we'll have to use JS.
With plain Couch code you'll have to show one form for each product (i.e. SKU).

That said, the solution I proposed is not that difficult. Try it and I'm sure you'll manage it easily.
Let us know if you happen to require any help.

Thanks KK and working on getting the pages set up properly and just not sure where to start. How will I call all of the product options on the index page? Will I have 3 separate pages tags? If so how would I detect if they add a new product (variation)?

[KK]

I can try and help you with the Couch code - you'll have to put in the AJAX/JS code yourself.

On the index page if you place the following code, it'll show the latest variation selected and the rest in the dropdown -

Code: Select all

<div id='my-place-holder'>
    <cms:pages masterpage='products.php' limit='1'>
        <form action="https://XXX.foxycart.com/cart" method="post" accept-charset="utf-8">
            <input type="hidden" name="name" value="<cms:show k_page_name />" />
            <input type="hidden" name="price" value="<cms:show price />" />
            <input type="hidden" name="code" value="<cms:show sku />" />
            Only <sup>$</sup><span class="dark"><cms:number_format price /></span>
            <div class="gap-20"></div>
            <select>
                <cms:set current_page=k_page_name />
                <cms:pages masterpage='products.php'>
                    <option value="<cms:show k_page_link />" <cms:if k_page_name=current_page>selected</cms:if>><cms:show k_page_title /></option>
                </cms:pages>    
            </select>
            <a class="order-button" href="#"><cms:show button_text /></a>
        </form>
    </cms:pages>
</div>

Please notice that I've wrapped the form in a placeholder div #my-place-holder.
Also notice that the SELECT options have links to the page-view of the product variations as values.

Idea is that when the user selects a new option, we can use AJAX to make a call to the selected link (i.e. the page-view) which then generates a new form with the selected variation. Upon receiving the AJAX reply we change the contents of the placeholder div to show the new form.

So now we just need to code the page-view to generate the required form.
The code is almost identical to what we used above. Use the following in products.php template -

Code: Select all

<cms:if k_is_page>
    <form action="https://XXX.foxycart.com/cart" method="post" accept-charset="utf-8">
        <input type="hidden" name="name" value="<cms:show k_page_name />" />
        <input type="hidden" name="price" value="<cms:show price />" />
        <input type="hidden" name="code" value="<cms:show sku />" />
        Only <sup>$</sup><span class="dark"><cms:number_format price /></span>
        <div class="gap-20"></div>
        <select>
            <cms:set current_page=k_page_name />
            <cms:pages masterpage='products.php'>
                <option value="<cms:show k_page_link />" <cms:if k_page_name=current_page>selected</cms:if>><cms:show k_page_title /></option>
            </cms:pages>    
        </select>
        <a class="order-button" href="#"><cms:show button_text /></a>
    </form>
</cms:if>

Hope this helps.