Category URL Structure in Espresso Store with Relationship Field

Question

We’re currently setting up an Expresso Store and are having a hard time getting the categories to show up in the url through a relationship field. Essentially, we’d like the user to be able to select a product through a relationship field and then have that product’s parent category (ideally parent and child if present) in the url.

The resulting path would be template_group/category/{parent}/{child}/{individual-product-here}

Code:

            {exp:channel:entries channel=“products" limit="1" dynamic="yes"}
                        <!— Relationship Field Begins —>
                        {related_product_1}
                        {exp:store:product entry_id="{related_product_1:entry_id}" form_class="form-horizontal" return="store/shopping-cart"}
                        <div class="product">
                            {exp:channel_images:images entry_id="{entry_id}" limit="1"}
                            {related_product_1:product_gallery}
                            <img src="{image:url:listing}" alt="{title}"  />
                            {/related_product_1:product_gallery}
                            {/exp:channel_images:images}
                            <h3><a href="#">{related_product_1:title}</a></h3>
                            <p class="product-description">
                            {exp:trunchtml chars="60" ending="..."}{related_product_1:product_description}{/exp:trunchtml}  
                            </p>
                            <p class=“product-price">{if on_sale}{price}{if:else}{regular_price}{/if}</p>


                            <a href=“{url_title_path=“products/category/…. need help”}”><div class=“glass”></div></a>


                            {!--<button class="add-to-cart" type="submit" value="Add to Cart"></button>--}
                            <a href="#"><div class="add-to-cart"></div></a>     
                        </div>
                        {/exp:store:product}
                        {/related_product_1}
                        {/exp:channel:entries}

Update: I think I have a resolution with the item, but the displayed results truncate… any help would be appreciated.

<p><a href=”{path="products/category/{category_url_title}/{related_product_1:url_title}”}”>{category_name}</a></p>

Generates this url:

http://www.example.com/products/category/%7Bcategory_url_title/category/controls/featured-product-name-5

I’m not sure why the category_url_title is not accurate? Adds a %7B… then the category_url_title… but then completes the category url.

Answer 1

{exp:channel:entries channel="products" limit="1" dynamic="yes"}
                        {related_product_2}
                        {exp:store:product entry_id="{related_product_2:entry_id}" form_class="form-horizontal"}
                        <input type="text" value="1" size="3" name="item_qty" style="visibility:hidden; display:none;">
                        {modifiers}
                          <select name="{modifier_input_name}" style="visibility:hidden; display:none;">
                            {modifier_options}
                              <option value="{option_id}" title="{if price_mod_val} ({price_mod}) {/if}" {if option_first} selected {/if}>
                                {option_name}
                                {if price_mod_val} ({price_mod}) {/if}
                              </option>
                            {/modifier_options}
                          </select>
                        {/modifiers}
                        <div class="product">
                            {exp:channel_images:images entry_id="{entry_id}" limit="1"}
                            {related_product_2:product_gallery}
                            <img src="{image:url:listing}" alt="{title}"  />
                            {/related_product_2:product_gallery}
                            {/exp:channel_images:images}
                            <h3>
                            <a href="{path="products/item/"}{related_product_2:categories show_group="1"}/{category_url_title}{/related_product_2:categories}/{related_product_2:url_title}"}">
                            {related_product_2:title}
                            </a>
                            </h3>
                            <p class="product-description">
                            {exp:trunchtml chars="60" ending="..."}{related_product_2:product_description}{/exp:trunchtml}  
                            </p>
                            <p class="product-price">{if on_sale}{price}{if:else}{regular_price}{/if}</p>

                            <a href="{path="products/item/"}{related_product_2:categories show_group="1"}/{category_url_title}{/related_product_2:categories}/{related_product_2:url_title}"}"><div class="glass"></div></a>


                            <input id="related-item-{entry_id}" type="submit" style="display:none;" name="submit" value="1">
                            <input type="hidden" name="XID" value="{XID_HASH}">    
                            <a href="javascript:void(0);" onclick="$('#related-item-{entry_id}').click();">
                            <div class="add-to-cart"></div>
                            </a>

                        </div>
                        {/exp:store:product}
                        {/related_product_2}
                        {/exp:channel:entries}

Generating the Link:

<a href="{path="products/item/"}{related_product_2:categories show_group="1"}/{category_url_title}{/related_product_2:categories}/{related_product_2:url_title}"}"><div class="glass"></div></a>