Configuración del buscador API Search

Te contamos cómo:

Obtener feed de datos:

Lo que deberás de hacer primero que nada, es generar tu propio feed de datos en Mabisy para ello vamos a obtener un feed de caracter estandar como lo es el de Googler Merchant:

Aprende a como generar tu feed de Google Merchant através del siguiente enlace:

https://www.mabisy.com/blog-ayuda/como-obtener-un-feed-de-datos-de-mis-productos-para-google-merchant

Una vez hayas generado el feed vamos al siguiente paso:

Configurar API Search:

En este paso aprenderemos a configurar la plataforma, pero para ello primero accederemos a la plataforma atraves del siguiente link: https://www.apisearch.cloud/signin

Subir nuestro Feed a API Search:

Una vez accedamos a API Search, navegaremos através del menú hasta localizar la opción de "Feeds" que aparece dentro de la sección de Integraciones.

Accedemos al interior de dicho menú y haremos click sobre el botón de "Create New" para proceder a crear un nuevo feed:

Una vez aquí rellenaremos todo el formulario con la información de vuestra propia web:

• Choose a name for the feed: Ponemos el nombre del feed dicho nombre os facilitará una mejor identificación del feed.
• Your Feed URL: Colocamos la URL del feed que anteriormente hemos generado Ejemplo: https://vuestroDominio.com seguido de /apisearch.txt
• Import From Source: Dejarlo como aparece en la imagen.

El resto de campos dejarlos tal y como aparecen en la siguiente imagen.

Obtener la configuración de la capa.

Trás finalizar la subida del feed de datos, accederemos desde menú lateral al enlace con nombre "Layer Configuration".

Una vez dentro de la página podremos divisar diferentes bloques entre ellos estará el de "Install your search layer" seleccionaremos el contenido y lo copiaremos enteramente en nuestro portapapeles, ya que esto lo utilizaremos en un próximo paso:

El resto de configuraciones se dejaran igual que en la siguiente imagen.

Añadir los scripts en Mabisy.

Por último antes de finalizar con la configuración debemos añadir los script que hemos generado en el paso anterior y que recientemente habremos dejado copiado en nuestro portapapeles.

Para hacerlo desde el panel de control de mabisy "/admin" accedemos a la configuración atraves del menú:

Configuración > Avanzado > Configuraciones adicionales > Web

Y en la configuración: "Scripts que se pondrán en la cabecera (Head) de la web" añadimos los Scripts que anteriormente hemos copiado.

Para finalizar "Guardamos" la configuración y le damos al botón de "Publicar".

Agregar funcionalidad de agregar productos al carrito de nuestra web desde APISearch

Con el feed ya configurado haciendo uso de los anteriores pasos, deberemos de volver nuevamente a nuestra configuración del feed en API Search.

Para ello accederemos a la web (https://www.apisearch.cloud/signin) y acto seguido buscamos en el menú lateral izquierdo dentro del apartado de integraciones ("Integrations") el menú con nombre "Feeds". Una vez en el interior de la configuración del feed, nos desplazamos con la rueda del ratón hacia bajo hasta localizar la sección de "Parsing attributes" en esta sección deberemos de agregar que necesitaremos en los siguientes pasos:

Los atributos a agregar serán:

1. mpn
2. ProductID
3. IDSKU
4. TarifaID

Revisar la siguiente imagen para saber que debéis de rellenar:

Mostrar botón de Añadir al Carrito en API Search:

Una vez hayamos terminado de configurar todos los atributos nos dirigimos a "Template Customization" que se encuentra en el interior de la sección "Ui Layer", una vez dentro marcamos el check "Show Add To Cart" y el check "Show scroll up button".

Tras eso, en la sección de la derecha con nombre "Item Template" remplazamos el código por el siguiente:

<a onclick="{{click}}" href="{{fields.url}}" target="_top">
    <div class="product-img" style="background-image: url(\'{{fields.image}}\')"></div>
    <div class="product-uuid" style="display: none;">{{uuid_composed}}</div>
    <div class="product-score" style="display: none;">{{score}}</div>
     <div class="product-available">{{fields.is_available}}</div>
    <div class="product-main-info">
        <div class="product-title highlight">{{{fields.title}}}</div>
    </div>
</a>
<div class="product-price{{^fields.has_discount}} product-price-no-discount{{/fields.has_discount}}">
    <div class="price-wrapper">
        {{#fields.has_discount}}
        <span class="discount">{{fields.old_price_formatted}}</span>
        <span class="price">{{fields.price_formatted}}</span>
        {{/fields.has_discount}} {{^fields.has_discount}}
        <span class="price-no-discount">{{fields.price_formatted}}</span>
        {{/fields.has_discount}}
    </div>
</div>
<input id="{{add_to_cart_num_id}}" type="number" value="1" />
{{#fields.is_available}}
<div class="product-button" onclick="{{add_to_cart_callback}} {{add_to_cart}}">
    <i class="fas fa-cart-plus"></i>
    <div class="button-title">Añadir</div>
</div>
{{/fields.is_available}}

{{^fields.is_available}}
<div class=" product-button product-button-disabled" onclick="{{add_to_cart_callback}} {{add_to_cart}}">
    <i class="fas fa-cart-plus"></i>
    <div class="button-title">No stock</div>
</div>
{{/fields.is_available}}

Y para finalizar este apartado donde poner Additional CSS remplazar o copiar y pegar el siguiente código y finalizamos guardando.

.content-container {
            background-color: white;
        }
        
        .product-item {
            cursor: pointer;
            margin: 0!important;
            padding: 16px!important;
        }
        
        .product-item:hover {
            background-color: #f9f9f9!important;
        }
        
        .product-item a {
            text-decoration: none!important;
        }
        
        .product-price {
            position: relative;
        }
        
        .product-price .price-wrapper {
            font-weight: 700;
            margin: 0 auto;
        }
        
        .product-price .price-no-discount {
            color: black!important;
        }
        
        .product-price .discount {
            margin: 0;
            margin-right: 5px;
            font-size: 14px!important;
            color: black!important;
            margin-bottom: 2px;
        }
        
        .product-price .price {
            margin: 0;
            margin-left: 5px;
            color: #f30018!important;
        }
        
        .product-title {
            color: black!important;
            font-weight: normal!important;
            text-align: center;
        }
        
        .check-label:hover{
            color: black!important;
        }
        
        .product-main-info, .product-price {
            background: transparent!important;
        }

.product-button-disabled{
	  background: #F1F3F4!important;
  	  color: #555;
  	  cursor: not-allowed;
}

Agregar funcionalidad al botón de Añadir al Carrito

Por defecto, el botón de Añadir al carrito no tiene asignado ninguna acción tras pulsar sobre él, por lo que en este paso le vamos a agregar una acción para que tras pulsar encima nos agregue el producto a nuestro carrito de la compra en nuestra web.

Para ello accedemos nuevamente a la configuración de API Search y hacemos clic sobre el menú Layer Configuration situado en el menú de la izquierda y buscamos la sección "Add_to_cart snippet" donde en su interior copiaremos el siguiente fragmento de código.

window.addToCart(item.metadata.ProductID, id,item.metadata.TarifaID, quantity);

Para finalizar guardamos y pulsamos sobre "Submit".