vracoop_click_and_collect/views/vracoop_templates.xml

<?xml version="1.0" encoding="utf-8"?>
<odoo>

    <template id="point_retrait_choose">
        
        <a class="card-link " data-toggle="collapse" t-att-href="'#slots_point_retrait_%i' % point_retrait.id" t-att-id="'point_retrait_%i' % point_retrait.id">
            <input t-att-value="point_retrait.id" t-att-id="'point_retrait2_%i' % point_retrait.id" type="radio" name="point_retrait_type" t-att-checked="order.vracoop_point_retrait_id and order.vracoop_point_retrait_id.id == point_retrait.id and 'checked' or False" t-att-class="'d-none' if point_retrait_nb == 1 else ''"/>
        </a>
        <label class="label-optional" t-field="point_retrait.name" t-att-for="'point_retrait2_%i' % point_retrait.id"/>
        <t t-if="point_retrait.street">
            <br/><span><t t-esc="point_retrait.street"/></span><br/>
        </t>
        <t t-if="point_retrait.street2">
            <span><t t-esc="point_retrait.street2"/></span><br/>
        </t>
        <span><t t-esc="point_retrait.city"/> 
        <t t-esc="point_retrait.zip"/></span><br/><br/>


        <div class="collapse" data-parent="#retrait_method" t-att-id="'slots_point_retrait_%i' % point_retrait.id">
            <h5>Sélectionner le jour et le créneau pour votre retrait</h5>
            <t t-set="list_slots" t-value="point_retrait.slot_calculate()"/>

            <div class="top-content mt-4 mb-4">
                <div class="container-fluid">
                    <div t-att-id="'carousel_%i' % point_retrait.id" class="carousel slide" data-ride="carousel" data-interval="false">
                        <ul class="nav nav-tabs carousel-inner row w-100 mx-auto" role="tablist">
                            <t t-foreach="list_slots" t-as="slot">
                                <t t-if="slot_first">    
                                    <li class="nav-item carousel-item col-12 col-sm-6 col-md-4 col-lg-3 active">
                                        <a data-toggle="tab" class="nav-link active btn btn-primary" t-attf-href='##{slot[1].strftime("%A")}#{point_retrait.id}'>
                                            <label class=" label_radio_button" role="radio">
                                                <input t-attf-id='#{slot[1].day}-#{slot[1].month}-#{point_retrait.id}' name="day_select d-none" type="radio" class="radio_hide" t-attf-value='#{slot[1].day}-#{slot[1].month}-#{point_retrait.id}'/>
                                                    <span class="span_radio_button">
                                                        <t class="week_day" t-esc="slot[0]"/><br/>
                                                        <t t-esc="slot[1].day"/><br/>
                                                        <t t-esc="slot[2]"/>
                                                    </span>
                                            </label>
                                        </a>
                                    </li>
                                </t>
                                <t t-else="">
                                    <li class="nav-item carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
                                        <a  data-toggle="tab" class="nav-link btn btn-primary" t-attf-href='##{slot[1].strftime("%A")}#{point_retrait.id}'>
                                            <label class=" label_radio_button" role="radio">
                                                <input t-attf-id='#{slot[1].day}-#{slot[1].month}-#{point_retrait.id}' name="day_select" type="radio" class="radio_hide d-none" t-attf-value='#{slot[1].day}-#{slot[1].month}-#{point_retrait.id}' />
                                                    <span class="span_radio_button">
                                                        <t class="week_day" t-esc="slot[0]"/><br/>
                                                        <t t-esc="slot[1].day"/><br/>
                                                        <t t-esc="slot[2]"/>
                                                    </span>
                                            </label>
                                        </a>
                                    </li>
                                </t>
                            </t>
                        </ul>
                        <a class="carousel-control-prev" t-att-href="'#carousel_%i' % point_retrait.id" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" t-att-href="'#carousel_%i' % point_retrait.id" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" ></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="tab-content">
              <t t-foreach="list_slots" t-as="slot">
                <t t-if="slot_first">
                    <div class="container tab-pane active" t-attf-id='#{slot[1].strftime("%A")}#{point_retrait.id}'>
                        <t t-foreach="slot[3]" t-as="slot_by_day">
                            <label class="label_radio_button" role="radio">
                                <input name="hour_select" type="radio" class="radio_hide" t-attf-value="#{slot[1].day}-#{slot[1].month}-#{slot_by_day[0]}" t-attf-id="#{slot_by_day_index}"/>
                                    <span class="btn btn-outline-primary span_radio_button">
                                        <t t-esc="slot_by_day[0]"/> : 
                                        <t t-esc="slot_by_day[1]"/>
                                    </span>
                            </label>
                        </t>
                    </div>
                </t>
                <t t-else="">
                    <div class="container tab-pane fade" t-attf-id='#{slot[1].strftime("%A")}#{point_retrait.id}'>
                        <t t-foreach="slot[3]" t-as="slot_by_day">
                            <label class=" label_radio_button" role="radio">
                                <input t-attf-id="#{slot_by_day_index}" name="hour_select" type="radio" class="radio_hide" t-attf-value="#{slot[1].day}-#{slot[1].month}-#{slot_by_day[0]}"/>
                                    <span class="btn btn-outline-primary span_radio_button">
                                        <t t-esc="slot_by_day[0]"/> : 
                                        <t t-esc="slot_by_day[1]"/>
                                    </span>
                            </label>
                        </t>
                    </div>
                </t>
                </t>
            </div>
        </div>
    </template>

    <template id="point_retrait_one">

        <!-- Si 1 seul point relais -->
        <a class="card-link point_retrait_type"  t-att-href="'#slots_point_retrait_%i' % point_retrait.id" t-att-id="'point_retrait_%i' % point_retrait.id">
            <label class="label-optional" t-field="point_retrait.name" t-att-for="'point_retrait_%i' % point_retrait.id">
                <!-- <input t-att-value="point_retrait.id" t-att-id="'point_retrait_%i' % point_retrait.id" type="radio" name="point_retrait_type" t-att-checked="order.vracoop_point_retrait_id and order.vracoop_point_retrait_id.id == point_retrait.id and 'checked' or False"/> -->
                <input t-att-value="point_retrait.id" t-att-id="'point_retrait2_%i' % point_retrait.id" type="radio" name="point_retrait_type" t-att-checked="order.vracoop_point_retrait_id and order.vracoop_point_retrait_id.id == point_retrait.id and 'checked' or False" t-att-class="'d-none' if point_retrait_nb == 1 else ''"/>
                    <span class="span_radio_button">
                        <t t-esc="point_retrait.name"/><br/>
                    </span>
            </label>
            <t t-if="point_retrait.street">
                <br/><span><t t-esc="point_retrait.street"/></span><br/>
            </t>
            <t t-if="point_retrait.street2">
                <span><t t-esc="point_retrait.street2"/></span><br/>
            </t>
            <span><t t-esc="point_retrait.city"/> 
            <t t-esc="point_retrait.zip"/></span>
        </a>

        <div t-att-id="'slots_point_retrait_%i' % point_retrait.id">
            <h5>Sélectionner le jour et le créneau pour votre retrait</h5>
            <t t-set="list_slots" t-value="point_retrait.slot_calculate()"/>

            <div class="top-content mt-4 mb-4">
                <div class="container-fluid">
                    <div t-att-id="'carousel_%i' % point_retrait.id" class="carousel slide" data-ride="carousel" data-interval="false">
                        <ul class="nav nav-tabs carousel-inner row w-100 mx-auto" role="tablist">
                            <t t-foreach="list_slots" t-as="slot">
                                <t t-if="slot_first">    
                                    <li class="nav-item carousel-item col-12 col-sm-6 col-md-4 col-lg-3 active">
                                        <a data-toggle="tab" class="nav-link active btn btn-primary" t-attf-href='##{slot[1].strftime("%A")}#{point_retrait.id}'>
                                            <label class=" label_radio_button" role="radio">
                                                <input t-attf-id='#{slot[1].day}-#{slot[1].month}-#{point_retrait.id}' name="day_select" type="radio" class="radio_hide" t-attf-value='#{slot[1].day}-#{slot[1].month}-#{point_retrait.id}'/>
                                                    <span class="span_radio_button">
                                                        <t class="week_day" t-esc="slot[0]"/><br/>
                                                        <t t-esc="slot[1].day"/><br/>
                                                        <t t-esc="slot[2]"/>
                                                    </span>
                                            </label>
                                        </a>
                                    </li>
                                </t>
                                <t t-else="">
                                    <li class="nav-item carousel-item col-12 col-sm-6 col-md-4 col-lg-3">
                                        <a  data-toggle="tab" class="nav-link btn btn-primary" t-attf-href='##{slot[1].strftime("%A")}#{point_retrait.id}'>
                                            <label class=" label_radio_button" role="radio">
                                                <input t-attf-id='#{slot[1].day}-#{slot[1].month}-#{point_retrait.id}' name="day_select" type="radio" class="radio_hide" t-attf-value='#{slot[1].day}-#{slot[1].month}-#{point_retrait.id}'/>
                                                    <span class="span_radio_button">
                                                        <t class="week_day" t-esc="slot[0]"/><br/>
                                                        <t t-esc="slot[1].day"/><br/>
                                                        <t t-esc="slot[2]"/>
                                                    </span>
                                            </label>
                                        </a>
                                    </li>
                                </t>
                            </t>
                        </ul>
                        <a class="carousel-control-prev" t-att-href="'#carousel_%i' % point_retrait.id" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" t-att-href="'#carousel_%i' % point_retrait.id" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" ></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="tab-content">
              <t t-foreach="list_slots" t-as="slot">
                <t t-if="slot_first">
                    <div class="container tab-pane active" t-attf-id='#{slot[1].strftime("%A")}#{point_retrait.id}'>
                        <t t-foreach="slot[3]" t-as="slot_by_day">
                            <label class="label_radio_button" role="radio">
                                <input name="hour_select" type="radio" class="radio_hide" t-att-value="slot_by_day[0]" t-attf-id="#{slot_by_day_index}"/>
                                    <span class="btn btn-outline-primary span_radio_button">
                                        <t t-esc="slot_by_day[0]"/> : 
                                        <t t-esc="slot_by_day[1]"/>
                                    </span>
                            </label>
                        </t>
                    </div>
                </t>
                <t t-else="">
                    <div class="container tab-pane fade" t-attf-id='#{slot[1].strftime("%A")}#{point_retrait.id}'>
                        <t t-foreach="slot[3]" t-as="slot_by_day">
                            <label class=" label_radio_button" role="radio">
                                <input t-attf-id="#{slot_by_day_index}" name="hour_select" type="radio" class="radio_hide" t-att-value="slot_by_day[0]"/>
                                    <span class="btn btn-outline-primary span_radio_button">
                                        <t t-esc="slot_by_day[0]"/> : 
                                        <t t-esc="slot_by_day[1]"/>
                                    </span>
                            </label>
                        </t>
                    </div>
                </t>
                </t>
            </div>
        </div>
    </template>

    <template id="vracoop_payment_delivery" inherit_id="website_sale_delivery.payment_delivery">
        
        <xpath expr="//div[@id='payment_method']" position="before">
            <div t-if="points_retrait" id="point_retrait" class="d-none mt-3">
                <t t-set="point_retrait_nb" t-value="len(points_retrait)"/>
                <h3 t-if="point_retrait_nb" class="mb24">Choisir un point de retrait</h3>
                <div t-if="point_retrait_nb &gt; 1" class="card border-0" id="retrait_method">
                    <ul class="list-group">
                    <t t-foreach="points_retrait" t-as="point_retrait">
                        <li class="list-group-item">
                            <t t-call="vracoop_click_and_collect.point_retrait_choose"/>
                        </li>
                    </t>
                    </ul>
                </div>

                <div t-if="point_retrait_nb == 1" class="card border-0" id="retrait_method">
                    <ul class="list-group">
                    <t t-foreach="points_retrait" t-as="point_retrait">
                        <li class="list-group-item">
                            <t t-call="vracoop_click_and_collect.point_retrait_choose"/>
                        </li>
                    </t>
                    </ul>
                </div>
            </div>

        </xpath>
        
    </template>

</odoo>