Custom Products/CMS includes

From Hostcontrol Wiki
Jump to: navigation, search

CMS includes

Sinds 22-12-2014 kunnen Custom Products ook via de shop (Storefront) verkocht worden.

Er zijn twee URLs toegevoegd die dit proces ondersteunen, namelijk:

  • product keuze scherm
  • product detail invoer scherm


Product keuze scherm

URL: http://.../shop/product/{category slug}

Content Template : shop-product-{category slug}.html
Header  Template : shop-product-{category slug}-header.html
Footer  Template : shop-product-{category slug}-footer.html

Custom-products-shop-1.png


Product detail invoer scherm

URL: http://.../shop/product/order/{plan id}

Content Template : order-product-{category slug}.html
Header  Template : order-product-{category slug}-header.html
Footer  Template : order-product-{category slug}-footer.html

Custom-products-shop-2.png


Category slug opzoeken

Hierboven wordt een aantal keer verwezen naar de category slug. Dit is een tekstuele identifier voor een Custom Product Category. Het voordeel van een slug is dat deze herkenbaar is voor gebruikers en toch in URLs opgenomen kan worden. Slugs worden automatisch gegenereerd door het systeem.

Voorbeelden:

  • "Hosted Exchange" wordt "hosted-exchange"
  • "SSL" wordt "ssl"

Opzoeken:

  • Ga naar de Storefront
  • Menu Products -> Selecteer de desbetreffende categorie
  • De slug is zichtbaar in de URL van de huidige pagina, bijvoorbeeld: http://.../ca/product/hosted-exchange/all

De kan een slug dus pas opzoeken nadat een categorie is gepublished in Storefront.


Over templates

Er zijn steeds 3 templates beschikbaar: Content, Header en Footer. De Content template override de Header en Footer templates; Je moet daarom 1 van onderstaande keuzes maken:

  • Je definieerd GEEN templates (standaard); en gaat dus akkoord met default layout. Voordeel: Een nieuwe layout in Hostcontrol wordt automatisch toegepast.
  • Je definieerd ALLEEN de Header en Footer templates; en past daarmee bijvoobeeld alleen het logo en copyright aan. Voordeel: Eigen identiteit, maar wel met functionaliteit van Hostcontrol.
  • Je definieerd ALLEEN de Content template; en hebt daarmee volledige controle over het uiterlijk van de pagina.


Een template aanmaken

Procedure:

  • Ga naar Resellerarea
  • Menu: Settings -> Label Settings
  • Klik op Storefront Editor
  • Tabblad: Includes
  • Klik op "Add Include"
  • Neem exact de naam over zoals hierboven is aangegeven
  • Default templates staan hieronder


Beschikbare variabelen

  • {{ plans }} Lijst met Custom Product Plans voor de huidige Category
  • {{ category }} Custom Product Category details

En hieronder een dump van gegevens die je per plan opvragen.

Voorbeeld: {{ plan.description }} of {{ plan.category.caption_label }}


{

  'id': 3,
  'name': 'HEX Basic',
  'description': '',

  'reseller_details': None
  'customer_details': None,

  'custom_link_name': None,
  'custom_link_url': None,

  'category': {'caption_help_text': 'Vul hier je domeinnaam in',
               'caption_label': 'Domeintje',
               'id': 1,
               'is_auto_delivery_enabled': True,
               'is_caption_enabled': True,
               'is_caption_read_only': False,
               'is_caption_required': True,
               'is_displayed_in_menu': True,
               'is_product_delivered_email_enabled': True,
               'is_product_details_enabled': True,
               'is_product_details_read_only': False,
               'is_product_details_required': True,
               'is_product_ordered_email_enabled': True,
               'name': 'Hosted Exchange',
               'product_details_help_text': 'Product-specific information, visible in the reseller- and customer area.',
               'product_details_label': 'Kleur van je auto',
               'slug': 'hosted-exchange'},

  'prices': [{'currency': {'iso_name': 'EUR', 'name': 'Euro'},
              'interval': 1,
              'price_new': 495,
              'price_renew': 495},
             {'currency': {'iso_name': 'EUR', 'name': 'Euro'},
              'interval': 3,
              'price_new': 1411,
              'price_renew': 1411},
             {'currency': {'iso_name': 'EUR', 'name': 'Euro'},
              'interval': 6,
              'price_new': 2723,
              'price_renew': 2723},
             {'currency': {'iso_name': 'EUR', 'name': 'Euro'},
              'interval': 12,
              'price_new': 5445,
              'price_renew': 5445}],

}


Template: shop-product-{category slug}.html

            <div class="header">
                <div class="page-header">
                    <h1>Buy {{ category.name }}</h1>
                </div>
            </div> <!-- /header -->

            <div class="row">
                <div class="span8">

                    <p>Select a plan:</p>

                    <table class="table table-condensed">
                        {% for plan in plans %}
                            <tr>
                                <td>
                                    {{ plan.name }}
                                </td>
                                <td>
                                    <a href="{% url 'shop:custom-product:order' plan.id %}"
                                       class="action-order-continue btn btn-primary">
                                        Order
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                    </table>

                </div>
                <div class="span4 sidebar">

                    <div id="cart" class="cart">
                        {% include 'sf_shop/fragments/cart.html' %}
                    </div>

                    <a href="{% url 'shop:register' %}" class="action-order-continue btn btn-primary pull-right">
                        Continue order
                    </a>

                </div>

            </div> <!-- /row -->

            <div class="footer">
            </div> <!-- /footer -->

            <div class="clearfix">
            </div>


Template: shop-product-{category slug}-header.html

                    <div class="page-header">
                        <h1>Buy {{ plan.category.name }}</h1>
                    </div>


Template: order-product-{category slug}.html

            <div class="header">
                <div class="page-header">
                    <h1>Buy {{ plan.category.name }}</h1>
                </div>
            </div> <!-- /header -->

            <div class="row">
                <div class="span8">

                    <div class="form-horizontal">

                        <div class="control-group">
                            <label class="control-label" for="id_category">Category</label>
                            <div class="controls">
                                <input id="id_category" name="category" type="text" readonly="readonly"
                                       value="{{ plan.category.name }}" />
                            </div>
                        </div>

                        <div class="control-group">
                            <label class="control-label" for="id_plan">Plan</label>
                            <div class="controls">
                                <input id="id_plan" name="plan" type="text" readonly="readonly"
                                       value="{{ plan.name }}" />
                            </div>
                        </div>

                        <form method="post" action="{% url 'shop:custom-product:order' plan.id %}">

                            {% csrf_token %}

                            {{ form.media }}
                            {% bootstrap_form form %}

                            <div class="form-actions">
                                <button type="submit" class="btn btn-primary">
                                    <i class="icon-shopping-cart"></i>
                                    Add to cart
                                </button>
                            </div>

                        </form>

                    </div>

                </div>
                <div class="span4 sidebar">

                    <div id="cart" class="cart">
                        {% include 'sf_shop/fragments/cart.html' %}
                    </div>

                    <a href="{% url 'shop:register' %}" class="action-order-continue btn btn-primary pull-right">Continue order</a>

                </div>

            </div> <!-- /row -->

            <div class="footer">
            </div> <!-- /footer -->

            <div class="clearfix">
            </div>


Template: order-product-{category slug}-header.html

                    <div class="page-header">
                        <h1>Buy {{ plan.category.name }}</h1>
                    </div>