path: root/html/processed-views/content/product/product_details.php

<div class="productPage">

    <!-- product images -->
    <div class="productPage__imageCol">
        <div class="productPage__imageGrid" data-plugin-productimagemodal="">

            <?php $isFirst = false; ?>
            <?php foreach($product['Images'] as $image) : ?>

                <div class="productPage__image<?= ($isFirst)
                        ? ' productPage__image--b'
                        : '' ?>">
                    <?php $isFirst = true; ?>

                    <figure>
                        <picture>
                            <!--
                            <source data-srcset="/images/624x624/png/Content/media/sampleProduct.webp" type="image/webp"
                                class="lazysrcset"> -->
                            <source data-srcset="https://s1.sklavenitis.gr/images/1600x1600/40/<?=$image['Url']?>" type="image/jp2"
                                class="lazysrcset">
                            <img data-src="https://s1.sklavenitis.gr/images/1600x1600/40/<?=$image['Url']?>" alt="product" class="lazy">
                        </picture>
                    </figure>

                </div>

            <?php endforeach; ?>
       
        </div>
    </div>

    <!-- info -->
    <div class="productPage__info productInfo">
        <p class="productInfo__flag">FLAG</p>
        <h1 class="productInfo__title"><?=  $product['Title'] ?></h1>

        <p class="productInfo__desc"><?=    html($product['Description']) ?></p>

        <p class="productInfo__code"><?=    $product['SKU'] ?></p>

        <div class="priceContainer">

            <?php if ($product['DiscountPrice']) : ?>

                <span class="priceBlock__text">από</span>
                <div class="priceBlock__price priceBlock__price--init">
                    <?=
                    $product['Price']
                    ?> €
                </div>
            <?php endif; ?>

            <div class="priceBlock__price">
                <?=
                $product['DiscountPrice']
                ?> €
            </div>
            <!--
            <div class="priceBlock__price priceBlock__price--percentage">
                40%
            </div>
            -->
        </div>
<?php
    /* ---
        <div class="productInfo__attr productAttr" data-plugin-productattr="">
            <div class="productAttr__title">
                <label class="productAttr__label">ΧΡΩΜΑ</label>
                <span class="productAttr__selected">
                    <span class="productAttr__selectedDefault">Επιλέξτε</span>
                </span>
            </div>

            <!-- color ?? -->
            <!--
            <fieldset>              
                <legend class="field__label">ΧΡΩΜΑ</legend>               
                <div class="radiobuttons radiobuttons--colors">
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_0">
                            <input class="radiobutton__input" type="radio" id="color_0" name="color" value="Item_0">
                            <span class="radiobutton__icon" style="background-color:#995242"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_1">
                            <input class="radiobutton__input" type="radio" id="color_1" name="color" value="Item_1">
                            <span class="radiobutton__icon" style="background-color:#861724"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_2">
                            <input class="radiobutton__input" type="radio" id="color_2" name="color" value="Item_2">
                            <span class="radiobutton__icon" style="background-color:#202457"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_3">
                            <input class="radiobutton__input" type="radio" id="color_3" name="color" value="Item_3">
                            <span class="radiobutton__icon" style="background-color:#555775"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_4">
                            <input class="radiobutton__input" type="radio" id="color_4" name="color" value="Item_4">
                            <span class="radiobutton__icon" style="background-color:#164502"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_5">
                            <input class="radiobutton__input" type="radio" id="color_5" name="color" value="Item_5">
                            <span class="radiobutton__icon" style="background-color:#275276"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_6">
                            <input class="radiobutton__input" type="radio" id="color_6" name="color" value="Item_6">
                            <span class="radiobutton__icon" style="background-color:#266400"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_7">
                            <input class="radiobutton__input" type="radio" id="color_7" name="color" value="Item_7">
                            <span class="radiobutton__icon" style="background-color:#981225"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_8">
                            <input class="radiobutton__input" type="radio" id="color_8" name="color" value="Item_8">
                            <span class="radiobutton__icon" style="background-color:#455296"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_9">
                            <input class="radiobutton__input" type="radio" id="color_9" name="color" value="Item_9">
                            <span class="radiobutton__icon" style="background-color:#651336"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_10">
                            <input class="radiobutton__input" type="radio" id="color_10" name="color" value="Item_10">
                            <span class="radiobutton__icon" style="background-color:#353211"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_11">
                            <input class="radiobutton__input" type="radio" id="color_11" name="color" value="Item_11">
                            <span class="radiobutton__icon" style="background-color:#521059"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_12">
                            <input class="radiobutton__input" type="radio" id="color_12" name="color" value="Item_12">
                            <span class="radiobutton__icon" style="background-color:#654818"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_13">
                            <input class="radiobutton__input" type="radio" id="color_13" name="color" value="Item_13">
                            <span class="radiobutton__icon" style="background-color:#249666"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_14">
                            <input class="radiobutton__input" type="radio" id="color_14" name="color" value="Item_14">
                            <span class="radiobutton__icon" style="background-color:#964632"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_15">
                            <input class="radiobutton__input" type="radio" id="color_15" name="color" value="Item_15">
                            <span class="radiobutton__icon" style="background-color:#690375"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_16">
                            <input class="radiobutton__input" type="radio" id="color_16" name="color" value="Item_16">
                            <span class="radiobutton__icon" style="background-color:#240711"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_17">
                            <input class="radiobutton__input" type="radio" id="color_17" name="color" value="Item_17">
                            <span class="radiobutton__icon" style="background-color:#901481"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_18">
                            <input class="radiobutton__input" type="radio" id="color_18" name="color" value="Item_18">
                            <span class="radiobutton__icon" style="background-color:#897961"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_19">
                            <input class="radiobutton__input" type="radio" id="color_19" name="color" value="Item_19">
                            <span class="radiobutton__icon" style="background-color:#590235"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_20">
                            <input class="radiobutton__input" type="radio" id="color_20" name="color" value="Item_20">
                            <span class="radiobutton__icon" style="background-color:#729859"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_21">
                            <input class="radiobutton__input" type="radio" id="color_21" name="color" value="Item_21">
                            <span class="radiobutton__icon" style="background-color:#555851"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_22">
                            <input class="radiobutton__input" type="radio" id="color_22" name="color" value="Item_22">
                            <span class="radiobutton__icon" style="background-color:#284260"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_23">
                            <input class="radiobutton__input" type="radio" id="color_23" name="color" value="Item_23">
                            <span class="radiobutton__icon" style="background-color:#454939"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_24">
                            <input class="radiobutton__input" type="radio" id="color_24" name="color" value="Item_24">
                            <span class="radiobutton__icon" style="background-color:#972644"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor">
                        <label class="radiobutton__label" for="color_25">
                            <input class="radiobutton__input" type="radio" id="color_25" name="color" value="Item_25">
                            <span class="radiobutton__icon" style="background-color:#622680"></span>
                        </label>
                    </div>
                    <div class="radiobutton radiobutton--onlyColor disabled">
                        <label class="radiobutton__label" for="color_26">
                            <input class="radiobutton__input" type="radio" id="color_26" name="color" value="Item_26"
                                disabled="">
                            <span class="radiobutton__icon">

                                <figure>
                                    <picture>
                                        <source data-srcset="/images/32x32/png/Content/media/sampleColor.webp"
                                            type="image/webp" class="lazysrcset">
                                        <source data-srcset="/images/32x32/png/Content/media/sampleColor.jp2"
                                            type="image/jp2" class="lazysrcset">


                                        <img data-src="/images/32x32/png/Content/media/sampleColor.png" alt="Alt text"
                                            class="lazy">
                                    </picture>
                                </figure>
                            </span>
                        </label>
                    </div>
                </div>
            </fieldset>
            -->
        </div>

        <div class="productInfo__attr productAttr" data-plugin-productattr="">
            <div class="productAttr__title">
                <label class="productAttr__label">MEΓΕΘΟΣ</label>
                <span class="productAttr__selected">
                    <span class="productAttr__selectedDefault">Επιλέξτε</span>
                </span>
            </div>
            <!-- size ?? -->
            <!--
            <div class="productAttr__main">
                <div class="radiobutton radiobutton--button">
                    <label class="radiobutton__label" for="size_0">
                        <input class="radiobutton__input" type="radio" id="size_0" name="size" value="Item_0">
                        <span class="radiobutton__text">Item0</span>
                        <span class="radiobutton__icon"></span>
                    </label>
                </div>
                <div class="radiobutton radiobutton--button">
                    <label class="radiobutton__label" for="size_1">
                        <input class="radiobutton__input" type="radio" id="size_1" name="size" value="Item_1">
                        <span class="radiobutton__text">Item1</span>
                        <span class="radiobutton__icon"></span>
                    </label>
                </div>
                <div class="radiobutton radiobutton--button">
                    <label class="radiobutton__label" for="size_2">
                        <input class="radiobutton__input" type="radio" id="size_2" name="size" value="Item_2">
                        <span class="radiobutton__text">Item2</span>
                        <span class="radiobutton__icon"></span>
                    </label>
                </div>
                <div class="radiobutton radiobutton--button">
                    <label class="radiobutton__label" for="size_3">
                        <input class="radiobutton__input" type="radio" id="size_3" name="size" value="Item_3">
                        <span class="radiobutton__text">Item3</span>
                        <span class="radiobutton__icon"></span>
                    </label>
                </div>
                <div class="radiobutton radiobutton--button">
                    <label class="radiobutton__label" for="size_4">
                        <input class="radiobutton__input" type="radio" id="size_4" name="size" value="Item_4">
                        <span class="radiobutton__text">Item4</span>
                        <span class="radiobutton__icon"></span>
                    </label>
                </div>
                <div class="radiobutton radiobutton--button">
                    <label class="radiobutton__label" for="size_5">
                        <input class="radiobutton__input" type="radio" id="size_5" name="size" value="Item_5">
                        <span class="radiobutton__text">Item5</span>
                        <span class="radiobutton__icon"></span>
                    </label>
                </div>
                <div class="radiobutton radiobutton--button">
                    <label class="radiobutton__label" for="size_6">
                        <input class="radiobutton__input" type="radio" id="size_6" name="size" value="Item_6">
                        <span class="radiobutton__text">Item6</span>
                        <span class="radiobutton__icon"></span>
                    </label>
                </div>
                <div class="radiobutton radiobutton--button">
                    <label class="radiobutton__label" for="size_7">
                        <input class="radiobutton__input" type="radio" id="size_7" name="size" value="Item_7">
                        <span class="radiobutton__text">Item7</span>
                        <span class="radiobutton__icon"></span>
                    </label>
                </div>
                <div class="radiobutton radiobutton--button disabled">
                    <label class="radiobutton__label" for="size_8">
                        <input class="radiobutton__input" type="radio" id="size_8" name="size" value="Item_8"
                            disabled="">
                        <span class="radiobutton__text">Item8</span>
                        <span class="radiobutton__icon"></span>
                    </label>
                </div>
            </div>
            -->
        </div>
    --- */
?>

<?php
    /*---
        <div class="addProduct">
            <div class="quantity quantity--init" data-plugin-quantity="{&quot;MaxQuantity&quot;:10}">
                <button class="quantity__btn quantity__btn--dec disabled" data-ref="quantity-control"></button>
                <input class="quantity__input" value="1" type="text" readonly="" aria-label="quantity">
                <button class="quantity__btn quantity__btn--inc" data-ref="quantity-control"></button>
                <div class="quantity__message quantity__message--added">Προστεθηκε στο καλάθι σας</div>
                <div class="quantity__message quantity__message--removed">Αφαιρεθηκε απο το καλάθι σας</div>
            </div>
            <button class="addToCartButton button button--icon" id="addToCartButton">
                <span class="addToCartButton__text addToCartButton__text--default">Προσθηκη στο καλαθι</span>
                <span class="addToCartButton__text addToCartButton__text--added">Προστεθηκε στο καλαθι</span>
                <span class="loader">
                    <span class="loader__inner">
                        <span class="loader__item loader__item--1"></span>
                        <span class="loader__item loader__item--2"></span>
                        <span class="loader__item loader__item--3"></span>
                    </span>
                </span>
            </button>
            <button class="fav iconButton icon-heart"></button>
        </div>

        <div class="cartAdd error-message">
            Please select color &amp; size
        </div>

        <div class="addProduct">

            <div class="quantity quantity--init" data-plugin-quantity="{&quot;MaxQuantity&quot;:10}">
                <button class="quantity__btn quantity__btn--dec disabled" data-ref="quantity-control"></button>
                <input class="quantity__input" value="1" type="text" readonly="" aria-label="quantity">
                <button class="quantity__btn quantity__btn--inc" data-ref="quantity-control"></button>
                <div class="quantity__message quantity__message--added">Προστεθηκε στο καλάθι σας</div>
                <div class="quantity__message quantity__message--removed">Αφαιρεθηκε απο το καλάθι σας</div>
            </div>
            <button class="addToCartButton button button--icon addToCartButton--added">
                <span class="addToCartButton__text addToCartButton__text--default">Προσθηκη στο καλαθι</span>
                <span class="addToCartButton__text addToCartButton__text--added">Προστεθηκε στο καλαθι</span>
                <span class="loader">
                    <span class="loader__inner">
                        <span class="loader__item loader__item--1"></span>
                        <span class="loader__item loader__item--2"></span>
                        <span class="loader__item loader__item--3"></span>
                    </span>
                </span>
            </button>
            <button class="fav iconButton icon-heart"></button>
        </div>

        <div class="addProduct">

            <div class="quantity quantity--init" data-plugin-quantity="{&quot;MaxQuantity&quot;:10}">
                <button class="quantity__btn quantity__btn--dec disabled" data-ref="quantity-control"></button>
                <input class="quantity__input" value="1" type="text" readonly="" aria-label="quantity">
                <button class="quantity__btn quantity__btn--inc" data-ref="quantity-control"></button>
                <div class="quantity__message quantity__message--added">Προστεθηκε στο καλάθι σας</div>
                <div class="quantity__message quantity__message--removed">Αφαιρεθηκε απο το καλάθι σας</div>
            </div>
            <button class="addToCartButton button button--icon addToCartButton--loading">
                <span class="addToCartButton__text addToCartButton__text--default">Προσθηκη στο καλαθι</span>
                <span class="addToCartButton__text addToCartButton__text--added">Προστεθηκε στο καλαθι</span>
                <span class="loader">
                    <span class="loader__inner">
                        <span class="loader__item loader__item--1"></span>
                        <span class="loader__item loader__item--2"></span>
                        <span class="loader__item loader__item--3"></span>
                    </span>
                </span>
            </button>
            <button class="fav iconButton icon-heart"></button>
        </div>

        <div class="addProduct">
            <div class="notifyMe" data-plugin-expand="">
                <button class="button button--border notifyMe__button" data-trigger-expand="notifyme">
                    <span class="notifyMe__buttonText">Eνημέρωση διαθεσιμότητας</span>
                    <span class="loader">
                        <span class="loader__inner">
                            <span class="loader__item loader__item--1"></span>
                            <span class="loader__item loader__item--2"></span>
                            <span class="loader__item loader__item--3"></span>
                        </span>
                    </span>
                </button>
                <div class="notifyMe__main" data-content-expand="notifyme">
                    <form class="form notifyMe__form" data-qa="notifyMeForm">
                        <div class="field">
                            <div class="field__inner">


                                <div class="field__wrap ">
                                    <label class="field__label" for="email">Email *</label>
                                    <input class="field__input" id="email" type="email">
                                </div>

                            </div>
                        </div>
                        <div class="field">
                            <div class="field__inner">
                                <div class="field__wrap checkboxes">


                                    <div class="checkbox ">
                                        <label class="checkbox__label" for="checkoutTerms">
                                            <input class="checkbox__input" type="checkbox" id="checkoutTerms"
                                                name="checkoutTerms">
                                            <span class="checkbox__icon icon"></span>
                                            Έχω διαβάσει και αποδέχομαι τους <a href="Product Detail.html#">Όρους
                                                Χρήσης</a> &amp; την Πολιτική Απορρήτου.

                                        </label>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="field">
                            <button data-qa="form_submit" class="button widthAuto" type="submit">Subscribe</button>
                        </div>
                    </form>
                    <div class="statusMessage statusMessage--success">You are now subscribed</div>
                </div>
            </div>
            <button class="fav iconButton icon-heart"></button>
        </div>
        <p>Διαβάστε περισσότερα για τους τρόπους <a href="Product Detail.html#">Παράδοσης</a> &amp; τις <a
                href="Product Detail.html#">Επιστροφές</a></p>

    --- */
?>


        <div class="productDetails">
            
            <!-- more into sections -->
            <!-- example:
                    Ingredients
                    Composition
                    ConservationConditions
                    Instructions
                    Precautions
                    ExtraInfo1
                    SupplierDetails
            -->

            <!-- some section -->
            <div class="productDetails__item expandText" data-plugin-expandtext="">      
                <h2 class="productDetails__title">ΠΕΡΙΓΡΑΦΗ</h2>
                <div class="productDetails__content">
                    <div class="productDetails__contentInner expandText__main">
                        <p>Sed porttitor lectus nibh. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet
                            dui. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia
                            in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
                            Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
                        <p>Sed porttitor lectus nibh. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet
                            dui. Nulla quis lorem ut libero malesuada feugiat. Quisque velit nisi, pretium ut lacinia
                            in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.
                            Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</p>
                    </div>
                    <button class="button button--link expandText__button">
                        <span class="expandText__buttonTextMore">Διαβάστε περισσότερα</span>
                        <span class="expandText__buttonTextLess">Διαβάστε λιγοτερα</span>
                    </button>
                </div>
            </div>

            <!-- some section -->
            <div class="productDetails__item">
                <h2 class="productDetails__title">ΧΑΡΑΚΤΗΡΙΣΤΙΚΑ</h2>
                <div class="productDetails__content">
                    <div class="productDetails__contentInner">
                        <p>Curabitur aliquet quam id dui posuere blandit</p>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <div class="productHeader" data-plugin-productheader="">
        <div class="product">
            <div class="product__block">
                <div class="product__img">


                    <figure>
                        <picture>
                            <source data-srcset="/images/80x80/png/Content/media/sampleProduct.webp" type="image/webp"
                                class="lazysrcset">
                            <source data-srcset="/images/80x80/png/Content/media/sampleProduct.jp2" type="image/jp2"
                                class="lazysrcset">


                            <img data-src="/images/80x80/png/Content/media/sampleProduct.png" alt="product"
                                class="lazy">
                        </picture>
                    </figure>
                </div>
                <div class="product__more">
                    <span class="product__title">
                        Title of product
                    </span>
                    <p class="product__desc">
                        Quantity text here
                    </p>
                </div>
            </div>
            <div class="product__block">
                <div class="priceContainer">
                    <div class="priceBlock__price priceBlock__price--init">
                        18,91 €
                    </div>
                    <div class="priceBlock__price">
                        12,91 €
                    </div>
                </div>
                <button class="addToCartButton button button--icon">
                    <span class="addToCartButton__text addToCartButton__text--default">Προσθηκη στο καλαθι</span>
                    <span class="addToCartButton__text addToCartButton__text--added">Προστεθηκε στο καλαθι</span>
                    <span class="loader">
                        <span class="loader__inner">
                            <span class="loader__item loader__item--1"></span>
                            <span class="loader__item loader__item--2"></span>
                            <span class="loader__item loader__item--3"></span>
                        </span>
                    </span>
                </button>
            </div>
        </div>
    </div>

</div>