Make the Product List element to render the same on Forms and Apps

Bonjour,

Dans cette app n°1 https://eu.jotform.com/app/build/243644802607356

il y a plusieurs ligne de produits à l'écran avec une petite image chacune.

Dans ma nouvelle app n°2 https://eu.jotform.com/build/243494735670061 / ttps://eu.jotform.com/app/build/243501177589362

il n'y a que 2 lignes de produits à l'écran, avec une grosse image chacune.

App n°1 :

App n°2 :

Mon souhait :

Je souhaiterais avoir dans ma nouvelle app n°2, plusieurs lignes de produits à l'écran avec des petites images, comme c'est le cas dans l'app n° 1.

D'avance merci pour votre aide

Hi Francis,

Thanks for reaching out to Jotform Support. Our French Support agents are busy helping other Jotform users right now, so I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in French, let us know and we can have them do that. But, it might take a while until they're available again.

Now, coming back to your question, if I understand correctly, you want to replicate the product layout from App 1 and apply it to App 2. To do this, you’ll need to use the Product List element in App 2 instead of adding the form to your App Builder. Let me show you how:

1. In App Builder, click Add Element on the left to open the App Elements menu.

2. In the App Elements, under the Basic tab, scroll down to find Product List. Click on it or drag it to your preferred location in the App Builder.

That's it. Just add your products, upload their images, and include the necessary information. In the product list field, you'll see three icons in the top left corner to set your preferred layout. We also have a full guide on How to Add New Product List to an Existing App and How to Create Product Categories in Jotform Store Builder that you can check out.

Give it a try and reach out again if you have any other questions.

Bonjour,

En fait, cela ne répond pas à mon souhait.

Dans ma situation actuelle, j'aimerais simplement que les images soit plus petites afin que l'image d'une bouteille et le texte soient alignés et non pas superposés, dans mon app.

D'avance merci pour votre aide

Hi Francis,

I'll need a bit of time to look into this. I'll get back to you as soon as I can.

Hi Francis,

I created a new app here so that I could show how it should look if you choose the product list element instead of adding your form to the App builder like how it is now on App 2. Check out my screenshot here of the cloned app using a product list element instead:

And this is what it looks like in the phone preview:

This is the only way at the moment to make the products look the same as it does in App 1. While the feature to make the form display the same as how the product list element looks in the first app that you're looking for isn't available at Jotform right now, we've gone ahead and escalated your request to our developers. Exactly when or if it's developed depends on their workload, how viable it is, and how many other users also request it. If there are any updates, we'll circle back to this thread and let you know.

Thanks for your patience and understanding, we appreciate it.



Bonjour,

Vous voyez sur l'affichage de gauche l'image est petite. Mais sur le live preview du mobile à droite, l'image de la bouteille devient grosse. C'est frustrant.

A droite, la grosse image se positionne au dessus du titre "Maison Blanche 2005" au lieu de rester à gauche du titre, en ligne comme sur l'affichage de droite.

D'où vient ce changement de format d'affichage ?

Pouvez-vous m'aider à modifier le code source ?

Hi Francis,

The Apps and the Forms have different features so that their behaviors can differ, particularly when the forms depend on web browsers properties, while apps design depend on the devices and their operating systems. For instance, in the Form Builder, you can easily inject CSS code to customize the form, which is interpreted by web browsers, when you can't do it in the App Builder since an App doesn't require a web browser to be loaded. As a consequence, the App design is mainly based on the user experience the different devices provide, according to their native features. Can you tell us your last screenshot shows the Product List element provided by the App builder, as suggested by my colleague Sakib above, or a form with a Product List element, both embedded into an app? If you followed the Sakib suggestion, can you provide us the URL of your App?

Once we hear back from you, we’ll better understand how to investigate further.

Ma dernière capture d'écran, est l'affichage dans le générateur de formulaire.

Prendre l'élément Liste de Produit directement dans l' App Builder serait parfait pour moi, malheureusement je ne peux pas en extraire le total de la commande pour l'envoyer dans un autre formulaire. C'est ce qui m'a amené avec vos collègues, à essayer de trouver une solution de contournement en passant par le Form Builder.

Malheureusement en passant directement par l'app je ne peux pas non plus déterminer des options de taille de bouteille avec un prix spécial associé.

Cher Francis,

En attendant que la mise à jour de fonctionnalité demandée par mon collègue soit disponible, vous pouvez essayer d'illustrer vos produits avec une image plus petite, comme elle fait 800 pixels de côté, le rendu peut être amené à choisir un compromis entre la taille originale de l'image et l'espace dédié à l'écran. Essayez par exemple avec une image de 200 pixels maximum, voire moins.

Vous pouvez aussi injecter du code CSS dans le formulaire pour adapter la taille des images telles qu'affichées. Permettez-moi de vous montrer comment faire: 

1. Dans le Générateur de Formulaires,  cliquez sur le Rouleau de peinture à droite.
2. Dans le panneau de droite, allez à l'onglet Styles, copiez le code suivant:

.form-product-item .p_image .image_area {

 position: relative;

 max-width: 20% !important;

 max-height: 20% !important;

}

3. Et collez-le dans la section Injecter du CSS personnalisé.

Selon le rendu souhaité, vous pouvez adapter les valeurs de largeur et hauteur, soit en pourcentage, avec le signe '%', soit directement en pixels, en remplaçant le signe de pourcentage par 'px'. Vous pouvez aussi consulter ce guide, Comment injecter du code CSS personnalisé.

J'espère que cela vous permettra de peaufiner votre rendu en attendant une mise à jour de la fonctionnalité.

J'ai essayé mais l'image reste au dessus du texte.

Il faudrait que l'image soit devant le texte, à gauche.

Cher Francis,

Je ne suis pas certain que cela soit possible car, comme je vous disais précédemment, la mise en page peut dépendre des fonctionnalités propres aux navigateurs et aux modèles de portables. J'aurai donc besoin d'un peu de temps pour étudier la question, je reviens vers vous aussitôt que possible.

Merci de votre patience et de votre compréhension, que nous apprécions. 

J'ai utilisé ce code :

.form-product-item .p_image .image_area {

 position: absolute;

 max-width: 20% !important;

 max-height: 20% !important;

}

Et voici ce que cela donne :

Je me rapproche du but, mais comme je ne connais pas css, je n'y arrive pas bien.

Je ne sais pas bien comment bouger les différents items pour que tous soit correctement aligné.

Pouvez-vous m'aider svp ?

Bonjour,

Voici mon formulaire / app ci-dessous. Vous pourrez y voir le code CSS que j'ai injecté :

https://eu.jotform.com/build/243494735670061 / https://eu.jotform.com/app/build/243501177589362

Voici ce que je n'arrive pas à faire.

1. Je n'arrive pas à agrandir le cadre comme indiqué en jaune,
2. Il y a une trame que je n'arrive pas à enlever comme indiqué en orange,
3. je n'arrive pas à réaliser l'alignement comme indiqué en vert.

D'avance merci pour l'aide que vous pourrez m'apporter

Bonjour Francis,

Malheureusement, il est peu s'avérer assez compliqué de changer l'apparence de l'élément Liste de produit qui est déjà conçu pour être optimisé pour les différents navigateurs et appareils. Tous les navigateurs n'ont pas tous les mêmes fonctionnalités, ni les ordinateurs, smartphones et autres tablettes. Le rendu sur votre smartphone ne sera pas nécessairement le même sur un autre modèle ou sur une tablette, ou un ordinateur. A ce sujet, vous pouvez noter que dans le générateur d'Appli ne permet pas d'injecter du CSS, la gestion de l'affichage s'effectuant autrement et, justement, de manière plus adaptée. Ainsi le CSS injecté, lorsqu'il va trop dans le détail, peut générer des effets imprévus sur certains appareils. Je ne saurai donc vous conseiller un code particulier qui fasse mieux que ce que vous avez déjà réalisé, et je n'ai pas trop le choix que de laisser le soin à nos développeurs auprès desquels votre demande a déjà été remontée vous apporter la réponse adéquate. Je leur transmets votre solution qui précise le résultat que vous souhaitez obtenir.

Merci de votre patience et de votre compréhension, que nous apprécions.