Forum

Thread tagged as: Question, Shop

Perch Shop Variant Price

I am building my first shop with Perch and have a question on the product options. I can't seem to display the actual price for a product variant. Many of the product prices vary a great deal depending on large, medium or small and as far as I can see, the final price is only calculated on adding to basket. Ideally I would like to build in a live price update or at least place a +£15 net to the option value, so customers can see the difference in price before they add to the basket. Is this going to be possible on the product detail page?
Richard Lowe

Richard Lowe 0 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

Sure - what are you doing in your template? Are you using the perch:variants tags to display your variants?
Richard Lowe

Richard Lowe 0 points
Registered Developer

4 years ago

Yes, that part of the template is just like the example:


 <perch:if exists="has_variants">
      <perch:productopts>
        <h3><perch:productopt id="title" /></h3>
        <perch:productvalues>
          <perch:before><ul></perch:before>
            <li>
              <label>
                <perch:input id="options" name="opt-<perch:productvalue id="optionID" />[]"
                  value="<perch:productvalue id="valueID" />" type="radio" required="required" />
                <perch:productvalue id="valueTitle" />  +£ <perch:productvalue id="valueTitle" output="????????"/>
              </label>
            </li>
          <perch:after></ul></perch:after>
        </perch:productvalues>
      </perch:productopts>
    </perch:if>

I just need to know how to output the value itself
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

You're listing the options and values there, not the resulting variants.

<perch:variants>
    <perch:variant id="productVariantDesc" type="text" />
    <perch:variant id="price" type="shop_currency_value" />
</perch:variants>
Richard Lowe

Richard Lowe 0 points
Registered Developer

4 years ago

Thanks
Richard Lowe

Richard Lowe 0 points
Registered Developer

4 years ago

I can get the values to display now like this


<perch:productopts>
<perch:if id="catalog_only" value="0">
  <perch:form id="add_to_cart" app="perch_shop" action="/shop/cart">
    <perch:if exists="has_variants">


    <perch:variants>
    <perch:variant id="productVariantDesc" type="text" />
    <perch:variant id="price" type="shop_currency_value" />
</perch:variants>



      <perch:productopts>
        <h3><perch:productopt id="title" /></h3>
        <perch:productvalues>
          <perch:before><ul></perch:before>
            <li>
              <label>
                <perch:input id="options" name="opt-<perch:productvalue id="optionID" />[]"
                  value="<perch:productvalue id="valueID" />" type="radio" required="required" />
                <perch:productvalue id="valueTitle" />

              </label>
            </li>
          <perch:after></ul></perch:after>
        </perch:productvalues>
      </perch:productopts>

    </perch:if>
    <perch:input id="product" type="hidden" value="<perch:shop id="productID" type="hidden" env-autofill="false" />" />
    <perch:input type="submit" value="Add to cart" />
  </perch:form>
<perch:else />
  <p>This item is available in-store only.</p>
</perch:if>

But as soon as I try to add them next to the form option, they don't appear. Like this


<perch:productopts>
<perch:if id="catalog_only" value="0">
  <perch:form id="add_to_cart" app="perch_shop" action="/shop/cart">
    <perch:if exists="has_variants">


      <perch:productopts>
        <h3><perch:productopt id="title" /></h3>
        <perch:productvalues>
          <perch:before><ul></perch:before>
            <li>
              <label>
                <perch:input id="options" name="opt-<perch:productvalue id="optionID" />[]"
                  value="<perch:productvalue id="valueID" />" type="radio" required="required" />
                <perch:productvalue id="valueTitle" />     

                <perch:variants>
    <perch:variant id="productVariantDesc" type="text" /> = <perch:variant id="price" type="shop_currency_value" />
</perch:variants>

              </label>
            </li>
          <perch:after></ul></perch:after>
        </perch:productvalues>
      </perch:productopts>

    </perch:if>
    <perch:input id="product" type="hidden" value="<perch:shop id="productID" type="hidden" env-autofill="false" />" />
    <perch:input type="submit" value="Add to cart" />
  </perch:form>
<perch:else />
  <p>This item is available in-store only.</p>
</perch:if>

Call me stupid (and alot of people do!) but I can't see what to do.
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

A variant is made up from a combination of options, so I don't see quite how that would work.

Taking a step back, what are you trying to achieve from the user's point of view?
Richard Lowe

Richard Lowe 0 points
Registered Developer

4 years ago

Only to have some kind of price of the variant display next to the radio / checkbox option. So for example if a t-shirt has a base price of £10 for Small The options would look like

T-Shirt Price from £10

Options Small: +£0 Medium: +£5 Large: +£10

or summink!
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

I can see how that would work if you only ever have one option. Do any of your products ever have more than one? (e.g. size AND colour)
Richard Lowe

Richard Lowe 0 points
Registered Developer

4 years ago

Yes, but only the size effects price.
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

Ok. At the moment you have the option of listing out the variants, or of listing out the product options and values. In this case I would have thought that the variants would do what you're asking for, but you know best.
Richard Lowe

Richard Lowe 0 points
Registered Developer

4 years ago

I can make it work one way or another definitely. Just gets a bit cumbersome if there is a big list. Thanks Drew!