How to get an array / list on my front-page

Support Forms & Blueprints
1

I’m using the shoppingcart-plugin (but it is also a form-problem):

I’ve added in my backend a list of sizes to a product:

shoppingcart_product.yaml
header.size:
type: list
label: Size
default: 116
options:
116: 116
128: 128
140: 140

Now these options should be visible as a select-option on my frontpage.

How can I put the “page.header.size” in a select field?

2

If it is for a frontend form, can you post your whole form definition?

In any case, I think using a select fieldinstead of alist` field should solve your problem.

3

Here is the part in my “shoppingcart_core_detail_item.html.twig”:

			<select class="shoppingcart-size">
				<option value="" >{{ page.header.size }}</option>
			</select>

The “page.header.size” is filled by the backend-form.

13
Bildschirmfoto 2018-02-23 um 13.35.13.jpg1738×980 92.6 KB

54
Bildschirmfoto 2018-02-23 um 13.32.54.jpg1534×1056 146 KB

4

Here is what I would do:
In your blueprint:

header.size_available:
  type: selectize
  label: size available
  default: 116

Then in your template:

<select>
{% for size in page.header.size_available|split(',') %}
<option value="{{size}}">{{size}}</option>
{% endfor %}
</select>

Note that we need split filter because the data is stored as a commalist.
Hope this answer your question

5

Thanks, it´s working, but not in the way I thought …

49
Bildschirmfoto 2018-02-23 um 15.07.49.jpg1293×724 80.6 KB

6

You mean you want to pass the value to the order?

7

That too.
But when I choose a size, the shoppingcarts shows all sizes in the cart.

8

How can I get only the selected size in my Cart? Any idea?

Here is the html.twig:

{% set price = product.price|number_format(2, '.', '') %}
{% set image_size_cart = config.plugins.shoppingcart.ui.image_size_cart %}
{% set size = product.size %}

{{ shoppingcart_output_page_product_before_add_to_cart|raw }}

<button type="button" class="button js__shoppingcart__button-add-to-cart" data-id="{{product.id|e}}">
    <i class="fa fa-shopping-cart"></i> {{ 'PLUGIN_SHOPPINGCART.ADD_TO_CART'|t|e }}
</button>

<script>
    (function() {
        var currentProduct = {
            title: "{{ product.title|e }}",
            id: "{{ product.id|e }}",
            formatted_price: "{{ price|e }}",
            price: "{{ price|e }}",
            formatted_size: "{{ size|e }}",
            size: "{{ size|e }}",

// here I need only the selected size … not all sizes/options availeble …

            image: "{{ product.image.cropResize(image_size_cart, image_size_cart).url|raw }}",
            url: "{{ product.url|raw }}"
        };

        // Checks if page is a list of products or single product
        if (ShoppingCart.currentPageIsProducts) {
            ShoppingCart.currentProducts.push(currentProduct);
        } else {
            ShoppingCart.currentProduct = currentProduct;
            ShoppingCart.currentPageIsProduct = true;
        }
    }());
</script>